<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>声级计数据管理后台</title>

    <!-- CSS样式 -->
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* 或者 space-around, space-evenly */
        }

        .box {
            flex: 1; /* 两个 div 平均分配空间 */
            margin: 0 10px; /* 如果需要，可以设置外边距 */
        }

        .box1 {
            background-color: #cfcece;
            flex: 1;
        }

        .box2 {
            flex: 4;
            background-color: #ffffff;
        }
        /* 显示图片 */
        .image-container {
            width: 100%; /* 容器宽度为父元素的100% */
            height: 100%;
            /* max-width: 600px; 最大宽度，可根据需要调整 */
            margin: 0 auto; /* 水平居中 */
            /* padding: 20px; 内边距，可根据需要调整 */
            background-color: #f0f0f0; /* 背景颜色，可根据需要调整 */
        }
        .responsive-image {
            width: 100%; /* 图片宽度为容器宽度 */
            height: auto; /* 高度自动，保持图片的原始宽高比 */
            object-fit: cover; /* 保持图片的宽高比，裁剪多余部分 */
        }

        .menu {
            display: grid;
            grid-template-rows: repeat(4, 50px); /* 假设每个菜单项高度为 50px */
        }

        .menu-item {
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            text-decoration: none;
            color: #333;
        }

        .menu-item:hover {
            background-color: #e0e0e0;
        }
        #content {
            border: 1px solid #000;
            padding: 20px;
            min-height: 100%;
            max-height: 100%;
        }
    </style>

    <!-- JS逻辑部分 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuItems = document.querySelectorAll('.menu-item');
            const contentDiv = document.getElementById('content');

            function updateContent(menuItem) {
                switch (menuItem.getAttribute('data-content')) {
                    case 'serial-config':
                        contentDiv.innerHTML = `<form action="#">
                        <div class="form-group">
                            <label for="port">串口号：</label>
                            <select id="port" name="port">
                                <option value="/dev/ttyS0">/dev/ttyS0</option>
                                <!-- 其他选项 -->
                            </select>
                        </div>
                        <!-- 其他表单元素 -->
                        <div class="form-group">
                            <button type="submit" onclick="get_Serial_port_info()">保存设置</button>
                            <!-- 其他按钮 -->
                        </div>
                    </form>
                    `;
                        break;
                    case 'real-time-preview':
                        contentDiv.innerHTML = '<p>实时预览内容</p>';
                        break;
                    case 'history-data':
                        contentDiv.innerHTML = '<p>历史数据内容</p>';
                        break;
                    case 'about':
                        contentDiv.innerHTML = '<p>关于</p> <p>软件版本为：</p>';
                        break;
                    default:
                        contentDiv.innerHTML = '<p>默认内容</p>';
                }
            }

            menuItems.forEach(function(item) {
                item.addEventListener('click', function(e) {
                    e.preventDefault(); // 阻止默认的链接跳转行为
                    updateContent(this); // 'this' 指向被点击的 menu-item
                });
            });
        });

    </script>

</head>
<body>
    <div class="container">
        <div class="box box1">
            <!-- 菜单栏 -->
            <div class="image-container">
                <img src="frontend/tag.jpg" class="responsive-image">
            </div>
            <div class="menu">
                <a href="#" class="menu-item" data-content="serial-config">串口配置</a>
                <a href="real_time_preview" class="menu-item" data-content="real-time-preview">实时预览</a>
                <a href="history_data" class="menu-item" data-content="history-data">历史数据</a>
                <a href="about" class="menu-item" data-content="about">关于</a>
            </div>
        </div>
        <div class="box box2">
            <!-- 内容 -->
            <div id="content"></div>
        </div>
    </div>
    
</body>